<template>
  <my-layout ref="my-layout" :tabbar-is-show="true" :tab-bar-index="3">
    <template #TopBackground>
      <my-top-background />
    </template>
    <template #Navbar>
      <view
        style="
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
        "
      >
        <!--地理位置选择-->
        <view
          @click="popIsShow = true"
          style="
            margin-left: 34rpx;
            height: 66rpx;
            background-color: #ffffff;
            border-radius: 100rpx;
            display: flex;
          "
        >
          <view
            style="
              font-size: 28rpx;
              color: #333;
              line-height: 40rpx;
              margin-left: 30rpx;
              margin-top: 12rpx;
            "
            >{{ city.name ? city.name : "定位失败" }}</view
          >
          <image
            :src="indexTabBarUrl.redDownUrl"
            style="
              width: 20rpx;
              height: 14rpx;
              vertical-align: top;
              margin-left: 4rpx;
              margin-right: 30rpx;
              margin-top: 26rpx;
            "
          />
        </view>
      </view>
    </template>
    <template #Body>
      <view :class="isIphoneX ? 'phoneX_contents' : 'contents'">
        <!--顶部backgroundImage:`url(${indexBackgroundImage})`,-->
        <view
          class="scene_top_con"
          :style="{ backgroundPosition: `center top` }"
        >
          <view class="top_setions">
            <!--二人转-->
            <view class="program">
              <view class="program_name">
                <image
                  src="http://llg.qiniu.comeinvip.com/images/scene02.png"
                ></image>
              </view>
              <view @click="goVideos()" class="program_video">
                <image
                  mode="aspectFill"
                  src="https://llg.qiniu.comeinvip.com/FnXv14GiFC2sxIrL7Cjds0lxFVFh.png"
                ></image>
              </view>
              <!--信息-->
              <view class="slide_function">
                <view class="slide_ans">
                  <view class="slide_ans_lef">
                    <text class="slide_name">乡村爱情3部曲</text>
                    <text class="slide_font">宋小宝 文松 鸭蛋 宋晓锋</text>
                  </view>
                  <view class="slide_ans_rig" @click="openrewards()">
                    <image
                      src="http://llg.qiniu.comeinvip.com/images/ds.png"
                    ></image>
                    <text>打赏</text>
                  </view>
                </view>
                <view class="slide_sel">
                  <view>
                    <image
                      src="http://llg.qiniu.comeinvip.com/images/pl03.png"
                    ></image>
                    <text>20</text>
                  </view>
                  <view>
                    <image
                      src="http://llg.qiniu.comeinvip.com/images/pl01.png"
                    ></image>
                    <text>5.0</text>
                  </view>
                  <view>
                    <image
                      src="http://llg.qiniu.comeinvip.com/images/pl02.png"
                    ></image>
                    <text>36</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <!--bj-->
          <!-- <image class="top_bj"  src="http://llg.qiniu.comeinvip.com/images/top_bj.png"></image> -->
        </view>
        <!--功能块-->
        <view class="ad_block">
          <view class="ad_block_ans" @click="goLottery()">
            <text>来抽奖</text>
            <image
              src="http://llg.qiniu.comeinvip.com/images/block01.png"
            ></image>
          </view>
          <view class="ad_block_ans" @click="goPrivate()">
            <text>来互动</text>
            <image
              src="http://llg.qiniu.comeinvip.com/images/block02.png"
            ></image>
          </view>
          <view class="ad_block_ans" @click="goPrivate()">
            <text>来点单</text>
            <image
              src="http://llg.qiniu.comeinvip.com/images/block03.png"
            ></image>
          </view>
          <view class="ad_block_ans" @click="goRanking()">
            <text>拿锦鲤</text>
            <image
              src="http://llg.qiniu.comeinvip.com/images/block04.png"
            ></image>
          </view>
        </view>
        <!--排行榜-->
        <view class="rankings">
          <view class="ranking_title">
            <image
              src="http://llg.qiniu.comeinvip.com/images/scene01.png"
            ></image
            ><text>今日人气榜每小时更新一次</text>
          </view>

          <view class="ranking_list_new">
            <view class="ranking_top1" @click="goRanking()">
              <view class="top1_ico">
                <image
                  src="http://llg.qiniu.comeinvip.com/images/top.png"
                ></image
                ><text>TOP1</text>
              </view>

              <view class="ranking_font">
                <view class="ranking_font_lef">
                  <view class="r_f_l_name"
                    ><text class="r_f_l_01">乡村爱情第一部</text
                    ><text class="r_f_l_02">5.0</text></view
                  >
                  <text class="r_f_l_font">宋小宝 文松 丫蛋</text>
                </view>
                <view class="ranking_font_rig">
                  <image
                    src="http://llg.qiniu.comeinvip.com/images/plw03.png"
                  ></image>
                  <text>20</text>
                </view>
              </view>
              <image
                class="rank_top1_bj"
                mode="aspectFill"
                src="https://llg.qiniu.comeinvip.com/FrKTAHQ79XNw8Kef68lLodpSacxC.png"
              ></image>
            </view>

            <!--列表-->
            <view class="ranking_all">
              <view @click="goRanking()" class="ranking_all_ans">
                <view class="rank_all_lef">
                  <view class="rank_top_ico">
                    <image src="@/static/images/top.png"></image
                    ><text>TOP1</text>
                  </view>
                  <text class="rank_jf">5.0</text>
                  <image
                    class="rank_all_bj"
                    src="https://llg.qiniu.comeinvip.com/FnwhlfB7cEvAatXO7R9FFm4FJfku.png"
                  ></image>
                </view>
                <view class="rank_all_rig">
                  <view class="rank_rig_tit">乡村爱情第一部</view>
                  <view class="rank_rig_info">宋小宝 文松 丫蛋</view>
                  <view class="rank_rig_fun">
                    <image
                      src="http://llg.qiniu.comeinvip.com/images/pl03.png"
                    ></image
                    ><text>20</text>
                  </view>
                </view>
              </view>
              <view @click="goRanking()" class="ranking_all_ans">
                <view class="rank_all_lef">
                  <view class="rank_top_ico">
                    <image src="@/static/images/top.png"></image
                    ><text>TOP2</text>
                  </view>
                  <text class="rank_jf">5.0</text>
                  <image
                    class="rank_all_bj"
                    src="@/static/images/newxx.jpg"
                  ></image>
                </view>
                <view class="rank_all_rig">
                  <view class="rank_rig_tit">乡村爱情第一部</view>
                  <view class="rank_rig_info">宋小宝 文松 丫蛋</view>
                  <view class="rank_rig_fun">
                    <image
                      src="http://llg.qiniu.comeinvip.com/images/pl03.png"
                    ></image
                    ><text>20</text>
                  </view>
                </view>
              </view>
              <view @click="goRanking()" class="ranking_all_ans">
                <view class="rank_all_lef">
                  <view class="rank_top_ico">
                    <image src="@/static/images/top.png"></image
                    ><text>TOP3</text>
                  </view>
                  <text class="rank_jf">5.0</text>
                  <image
                    class="rank_all_bj"
                    src="https://llg.qiniu.comeinvip.com/FnwhlfB7cEvAatXO7R9FFm4FJfku.png"
                  ></image>
                </view>
                <view class="rank_all_rig">
                  <view class="rank_rig_tit">乡村爱情第一部</view>
                  <view class="rank_rig_info">宋小宝 文松 丫蛋</view>
                  <view class="rank_rig_fun">
                    <image
                      src="http://llg.qiniu.comeinvip.com/images/pl03.png"
                    ></image
                    ><text>20</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <!--抽奖-->
        <view v-if="lotteryShow" class="ticketing_screen"></view>
        <view v-if="lotteryShow" class="ticketing_sucess">
          <image src="@/static/images/hpceng.png"></image>
          <text
            :style="{ top: isIphoneX ? '52%' : '59%' }"
            @click="drawShow()"
          ></text>
        </view>

        <!--打赏-->
        <rewards @setreword="closeReword" :rewardsShow="rewardBoolea"></rewards>
      </view>
    </template>
    <template #OutArea>
      <geo-select v-model="popIsShow" />
    </template>
  </my-layout>
</template>

<script>
import util from "@/utils/util.js";
import tabBar from "@/components/tabbar/tabbar.vue";
import navBar from "@/components/navbar/navbar.vue";
import reward from "@/components/reward/reward.vue";
import indexTabBarUrl from "@/url/index_tabBar";
import { mapState } from "vuex";

export default {
  components: {
    "tab-bar": tabBar,
    "nav-bar": navBar,
    rewards: reward,
  },
  computed: {
    ...mapState(["city"]),
  },
  data() {
    return {
      popIsShow: false,
      indexTabBarUrl,
      isIphoneX: false,
      navbarData: {
        // 头部组件所需参数
        showCapsule: 0, //是否显示左上角返回图标   1表示显示    0表示不显示
        positionShow: 1, //0不显示定位 1 显示定位
        backgroundCor: 1, //0 无背影色 1首页背景颜色  1无背影色  2白色
        statusBarHeight: uni.getSystemInfoSync()["statusBarHeight"],
        navHeight: 45,
        title: "", //中间标题
        scrollWhite: 0, //0默认不改变 ,1 滚动时导航底部白底
      },
      lotteryShow: false,
      rewardBoolea: false,
    };
  },
  methods: {
    //跳转排行榜
    goRanking() {
      uni.navigateTo({
        url: "/pages/content/ranking/ranking",
      });
    },
    //显示抽奖
    goLottery() {
      this.lotteryShow = true;
    },
    //显示关闭
    drawShow() {
      this.lotteryShow = false;
    },
    //跳转私信
    goPrivate() {
      uni.navigateTo({
        url: "/pages/others/private_letter/private_letter",
      });
    },
    //跳转视频页
    goVideos() {
      uni.navigateTo({
        url: "/pages/content/videos/videos",
      });
    },
    //关闭打赏
    closeReword(res) {
      this.rewardBoolea = false;
    },
    openrewards() {
      this.rewardBoolea = true;
    },
  },
  created() {
    this.isIphoneX = util.getSystemInfoForPhone(); // 判断手机机型是否为iPhone X以上
  },
  onPageScroll(res) {
    if (res.scrollTop > 80) {
      this.navbarData.scrollWhite = 1;
    } else {
      this.navbarData.scrollWhite = 0;
    }
  },
};
</script>
<style>
@import url(@/static/css/index.css);
.ticketing_screen {
  position: fixed;
  z-index: 99;
  left: 0;
  top: 0;
  width: 750rpx;
  background: rgba(0, 0, 0, 0.85);
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.ticketing_sucess {
  width: 600rpx;
  height: 670rpx;
  display: block;
  position: fixed;
  left: 80rpx;
  top: 20%;
  z-index: 99999;
}
.ticketing_sucess image {
  display: block;
  width: 552rpx;
  height: 670rpx;
}
.ticketing_sucess text {
  position: fixed;
  left: 182rpx;
  top: 59%;
  z-index: 99;
  width: 368rpx;
  height: 84rpx;
  text-align: center;
  line-height: 84rpx;
  /* color: #333;
		font-size: 32rpx;
		background-color: #FBD632;
		border-radius: 48rpx; */
  background: transparent;
  text-align: center;
  line-height: 84rpx;
  border-radius: 48rpx;
  font-weight: bold;
}
</style>
